<template>
    <s-layout>
		<view class="new-promise-wrapper">
		    <!-- 新版顶部导航 -->
		    <view class="new-promise-navigation" style="margin-top: 20px;">
		        <view class="new-nav-back-button" @click="goBack">‹</view>
		        <view class="new-nav-title">活动发起须知</view>
		    </view>
		
		    <!-- 须知内容区域 -->
		    <scroll-view scroll-y class="new-promise-scroll-content">
		        <!-- 场地选择 -->
		        <view class="new-promise-card">
		            <view class="new-card-header">
		                <text class="new-card-icon">📍</text>
		                <text class="new-card-title">场地选择指南</text>
		            </view>
		            <view class="new-card-body">
		                <view class="new-rule-block">
		                    <text class="new-rule-emphasis">1. 自行安排场地：</text>
		                    <text class="new-rule-detail">若您有可用场地或已自行预订，请直接填写使用。</text>
		                </view>
		                <view class="new-rule-block">
		                    <text class="new-rule-emphasis">2. 使用合作场地：</text>
		                    <text class="new-rule-detail">可联系分会长咨询读书会合作场地信息，并由分会长协助预订（分会长联系方式见"我的"页面）。</text>
		                </view>
		            </view>
		            <view class="new-card-footer">
		                <checkbox :checked="checksStatus.location" @tap="toggleCheck('location')" color="#007AFF"
		                    style="transform:scale(0.8)" />
		                <text class="new-checkbox-label">我已阅读并理解场地选择规则</text>
		            </view>
		        </view>
		
		        <!-- 禁止迷信活动 -->
		        <view class="new-promise-card alert-card">
		            <view class="new-card-header">
		                <text class="new-card-icon">⚠️</text>
		                <text class="new-card-title">严禁封建迷信活动</text>
		            </view>
		            <view class="new-card-body">
		                <text class="new-rule-detail alert-text">
		                    根据互联网管理规定，平台严禁任何形式的占卜、算命、运势解读、灵修、能量疗愈、八字命理等封建迷信活动。请勿发起此类活动。
		                </text>
		            </view>
		            <view class="new-card-footer">
		                <checkbox :checked="checksStatus.superstition" @tap="toggleCheck('superstition')" color="#FF3B30"
		                    style="transform:scale(0.8)" />
		                <text class="new-checkbox-label">我已了解并承诺不发起违规活动</text>
		            </view>
		        </view>
		
		        <!-- 签到与信用分 -->
		        <view class="new-promise-card">
		            <view class="new-card-header">
		                <text class="new-card-icon">⏱️</text>
		                <text class="new-card-title">签到与信用分说明</text>
		            </view>
		            <view class="new-card-body">
		                <view class="new-rule-block">
		                    <text class="new-rule-emphasis">1. 签到操作：</text>
		                    <text class="new-rule-detail">选择签到类型的活动，参与者到场后需通过点击"签到"按钮完成打卡。</text>
		                </view>
		                <view class="new-rule-block">
		                    <text class="new-rule-emphasis">2. 信用分规则：</text>
		                    <text
		                        class="new-rule-detail">活动开始前72小时取消报名不扣分；72小时内取消、迟到或未到场将按规定扣除信用分。信用分降至0将无法报名活动，仅能作为主持人发起活动。</text>
		                </view>
		                <view class="new-rule-block">
		                    <text class="new-rule-emphasis">3. 信用分获取：</text>
		                    <text class="new-rule-detail">主持或参与活动可增加信用分。初始信用分为60，上限100分。</text>
		                </view>
		                <view class="new-rule-block">
		                    <text class="new-rule-emphasis">4. 详情查阅：</text>
		                    <text class="new-rule-detail interactive-text">点击此处查看信用分规则完整详情。</text>
		                </view>
		            </view>
		            <view class="new-card-footer">
		                <checkbox :checked="checksStatus.credit" @tap="toggleCheck('credit')" color="#007AFF"
		                    style="transform:scale(0.8)" />
		                <text class="new-checkbox-label">我已阅读并同意信用分相关规则</text>
		            </view>
		        </view>
		
		        <!-- 支持店主 -->
		        <view class="new-promise-card highlight-card">
		            <view class="new-card-header">
		                <text class="new-card-icon">☕</text>
		                <text class="new-card-title">支持场地提供方</text>
		            </view>
		            <view class="new-card-body">
		                <text class="new-rule-detail highlight-text">
		                    若读书会在商业场所（如咖啡馆、书店等）举办，请每位参与者按需消费（如点一杯饮品），以支持店家的场地提供。非商业场所无此要求。
		                </text>
		            </view>
		            <view class="new-card-footer">
		                <checkbox :checked="checksStatus.drink" @tap="toggleCheck('drink')" color="#34C759"
		                    style="transform:scale(0.8)" />
		                <text class="new-checkbox-label">我理解并支持场地提供方</text>
		            </view>
		        </view>
		
		        <!-- 禁止付费活动 -->
		        <view class="new-promise-card alert-card">
		            <view class="new-card-header">
		                <text class="new-card-icon">🚫</text>
		                <text class="new-card-title">严禁组织付费活动</text>
		            </view>
		            <view class="new-card-body">
		                <text class="new-rule-detail alert-text">
		                    平台禁止发布任何形式的收费报名活动，此类活动将无法通过审核。若发现发起人私下收费，会员可进行举报。
		                </text>
		            </view>
		            <view class="new-card-footer">
		                <checkbox :checked="checksStatus.payment" @tap="toggleCheck('payment')" color="#FF3B30"
		                    style="transform:scale(0.8)" />
		                <text class="new-checkbox-label">我承诺不组织任何付费活动</text>
		            </view>
		        </view>
		    </scroll-view>
		
		    <!-- 新版底部确认按钮 -->
		    <view class="new-promise-action-bar">
		        <button class="new-confirm-action-btn" @tap="confirmPromise" :disabled="!isAllChecked"
		            :class="{ 'btn-disabled': !isAllChecked }">
		            我已阅读并同意以上所有条款，确认发起
		        </button>
		    </view>
		</view>
	</s-layout>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

let routeParams = ref({});

const checksStatus = ref({
    location: false,
    superstition: false,
    credit: false,
    drink: false,
    payment: false,
});

const isAllChecked = computed(() => {
    return Object.values(checksStatus.value).every(status => status === true);
});

function toggleCheck(key) {
    checksStatus.value[key] = !checksStatus.value[key];
}

function confirmPromise() {
    if (!isAllChecked.value) return;
    const params = Object.entries(routeParams.value)
        .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
        .join('&');
    uni.navigateTo({
        url: `/pages/book/activity/edit?${params}`
    });
}

function goBack() {
    uni.navigateBack();
}

onLoad((query) => {
    routeParams.value = query;
});
</script>

<style lang="scss">
$new-theme-primary: #E53935; // 红色主题
$new-theme-accent: #FFB300; // 点缀色（橙黄）
$new-theme-bg: #FFF5F5; // 浅红背景
$new-theme-card: #fff;
$new-theme-border: #F8BBD0; // 浅粉边框
$new-theme-shadow: 0 4rpx 16rpx rgba(229, 57, 53, 0.10);
$new-theme-black: #222;
$new-theme-gray: #888;
$new-theme-white: #fff;
$new-theme-radius: 24rpx;
$new-theme-transition: all 0.25s cubic-bezier(.4, 0, .2, 1);

.new-promise-wrapper {
    background-color: $new-theme-bg;
    color: $new-theme-black;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    display: flex;
    flex-direction: column;
}

.new-promise-navigation {
    display: flex;
    align-items: center;
    padding: 24rpx 30rpx;
    background-color: $new-theme-card;
    box-shadow: $new-theme-shadow;
    position: sticky;
    top: 0;
    z-index: 100;
    border-radius: 0 0 $new-theme-radius $new-theme-radius;
}

.new-nav-back-button,
.new-nav-title {
    color: $new-theme-black;
}

.new-nav-back-button {
    font-size: 44rpx;
    padding-right: 20rpx;
}

.new-nav-title {
    flex: 1;
    text-align: center;
    font-size: 34rpx;
    font-weight: 600;
}

.new-promise-scroll-content {
    flex: 1;
    padding: 24rpx;
    padding-bottom: 160rpx; // 为底部按钮留出空间
}

.new-promise-card {
    background-color: $new-theme-card;
    border-radius: $new-theme-radius;
    padding: 28rpx;
    margin-bottom: 28rpx;
    box-shadow: $new-theme-shadow;
    transition: $new-theme-transition;
    color: $new-theme-black;

    &:active {
        transform: scale(0.99);
        box-shadow: 0 2rpx 8rpx rgba(229, 57, 53, 0.08);
    }
}

.new-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    padding-bottom: 16rpx;
    border-bottom: 1rpx solid #e5e5ea; // 浅分割线
}

.new-card-icon {
    font-size: 36rpx;
    margin-right: 16rpx;
    color: $new-theme-primary;
}

.alert-card .new-card-icon {
    color: darken($new-theme-primary, 10%);
}

.highlight-card .new-card-icon {
    color: $new-theme-accent;
}

.new-card-title {
    font-size: 30rpx;
    font-weight: 600;
    color: $new-theme-black;
}

.new-card-body {
    margin-bottom: 20rpx;
}

.new-rule-block {
    margin-bottom: 16rpx;
    line-height: 1.6;
}

.new-rule-emphasis {
    font-weight: 500;
    color: $new-theme-black;
    font-size: 28rpx;
}

.new-rule-detail {
    font-size: 26rpx;
    color: $new-theme-gray;
    display: block; // 确保换行
    margin-top: 4rpx;
}

.interactive-text {
    color: $new-theme-primary;
    text-decoration: underline;
    cursor: pointer;
}

.alert-text {
    color: darken($new-theme-primary, 15%);
    font-weight: 500;
}

.highlight-text {
    color: $new-theme-accent;
    font-weight: 500;
}

.new-card-footer {
    display: flex;
    align-items: center;
    padding-top: 16rpx;
    border-top: 1rpx solid #e5e5ea;

    .uni-checkbox-input {
        border-color: $new-theme-primary !important;
    }

    .uni-checkbox-input-checked {
        background-color: $new-theme-primary !important;
        border-color: $new-theme-primary !important;
    }
}

.new-checkbox-label {
    font-size: 26rpx;
    color: $new-theme-black;
    margin-left: 12rpx;
}

.new-promise-action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    padding: 20rpx 30rpx calc(20rpx + env(safe-area-inset-bottom));
    border-top: 1px solid $new-theme-border;
    box-shadow: 0 -2rpx 8rpx rgba(229, 57, 53, 0.04);
    z-index: 110;
}

.new-confirm-action-btn {
    width: 100%;
    height: 92rpx;
    background-image: linear-gradient(to right, $new-theme-primary, darken($new-theme-primary, 10%));
    color: $new-theme-white;
    font-size: 32rpx;
    border-radius: 46rpx;
    border: none;
    font-weight: 600;
    letter-spacing: 1rpx;
    box-shadow: 0 8rpx 24rpx rgba(229, 57, 53, 0.18);
    transition: $new-theme-transition;
    display: flex;
    align-items: center;
    justify-content: center;

    &.btn-disabled {
        background-image: none;
        background-color: $new-theme-gray;
        color: $new-theme-white;
        box-shadow: none;
    }

    &:active:not(.btn-disabled) {
        transform: translateY(1rpx) scale(0.99);
        box-shadow: 0 4rpx 10rpx rgba(229, 57, 53, 0.12);
    }
}
</style>